<template>
  <div class="home-container">
    <!-- 头部 搜索按钮 -->
    <van-nav-bar class="page-nav-bar">
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        round
        icon="search"
        to="/search"
        >搜索</van-button
      >
    </van-nav-bar>
    <!-- 中间 频道tabs列表 -->
    <van-tabs class="channel-tabs" v-model="tabIndex" animated swipeable>
      <van-tab v-for="c in channels" :key="c.id" :title="c.name">
        <ArticleList :channel="c" />
      </van-tab>
      <!-- 汉堡按钮 -->
      <div slot="nav-right" class="hamburger-btn" @click="isShowEdit = true">
        <i class="iconfont icon-gengduo"></i>
      </div>
    </van-tabs>

    <!-- 频道编辑 - 弹层 -->
    <van-popup
      v-model="isShowEdit"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <ChannelEdit
        :userChanList="channels"
        :index="tabIndex"
        @changeTab="changeTabIndex"
      />
    </van-popup>
  </div>
</template>

<script>
import ArticleList from '@/views/home/components/article-list.vue'
import { getUserChannels } from '@/api/user'
// 导入 getItem 方法
import { getItem } from '@/utils/storage'
// 引入编辑组件
import ChannelEdit from './components/channel-edit.vue'
export default {
  name: 'home',

  data () {
    return {
      tabIndex: 0,
      channels: [],
      isShowEdit: false
    }
  },

  components: { ArticleList, ChannelEdit },

  mounted () {},

  methods: {
    // 子组件转递被选中频道下标
    changeTabIndex (i) {
      // 修改当前选中频道下标
      this.tabIndex = i
      // this.taIndex = i关闭 频道编辑弹出框
      this.isShowEdit = false
    }
  },

  // 入口函数
  async created () {
    // // 1.请求获取频道列表接口
    // const { data: resBody } = await getUserChannels()
    // // 将返回的频道列表数组设置给data，方便视图中使用
    // this.channels = resBody.data.channels
    try {
      // 从本地获取 用户频道数组
      const localUsrChanList = getItem(this.$conf.USER_CHNA)
      // 如果本地有数组 并且未登录 则直接使用本地数组
      if (localUsrChanList && !this.$store.state.user) {
        this.channels = localUsrChanList
      } else {
        // 否则 去请求 服务器 获取数组
        // 请求 获取频道列表接口
        const { data: res } = await getUserChannels()
        console.log(res)
        // 将 返回的频道列表数组设置给data
        this.channels = res.data.channels
      }

      // // 如果登录，则去服务器获取 用户频道列表
      // if (this.$store.state.user) {
      //   // 请求获取频道列表接口
      //   const { data: res } = await getUserChannels()
      //   // 将返回的频道列表数组设置给data，方便使用
      //   this.channels = res.data.channels
      // } else {
      //   // 如果为登录，看看本地是否有保存用户频道列表
      //   const localUsrChanList = getItem(this.$conf.USER_CHNA)
      //   // 如果本地有，则直接从本地取
      //   if (localUsrChanList) {
      //     // 将本地数据设置给channels
      //     this.channels = localUsrChanList
      //   } else {
      //     // 如果本地没有，则取服务器获取默认用户频道列表
      //     const { data: res } = await getUserChannels()
      //     // 将返回的频道列表数组设置给data，方便视图中使用
      //     this.channels = res.data.channels
      //   }
      // }
    } catch (error) {}
  },

  activated () {
    console.log('activated->home')
  },
  deactivated () {
    console.log('deactivated->home')
  }
}
</script>

<style lang="less" scoped>
// 搜索按钮
.home-container {
  .van-nav-bar {
    background-color: #0094ff;
  }
  /deep/.van-nav-bar__title {
    max-width: unset;
  }
  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
      color: #fff;
    }
  }
}
// tabs频道列表
/deep/ .channel-tabs {
  .van-tab {
    border-right: 1px solid #edeff3;
    min-width: 200px;
    height: 80px;
    .van-tab__text {
      font-size: 27px;
      color: #777777;
    }
  }

  .van-tab--active .van-tab__text {
    color: #333 !important;
  }
  .van-tabs__line {
    width: 31px !important;
    height: 6px;
    background: rgba(50, 150, 250, 1);
    border-radius: 3px;
    bottom: 8px;
  }
  .van-tabs__nav {
    padding: 0;
  }
  // 汉堡按钮
  .hamburger-btn {
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 82px;
    background-color: #fff;
    opacity: 0.902;
    i.iconfont {
      font-size: 33px;
    }
  }
}
</style>
